<template>
  <div class="hom_game_box">
    <div v-for="(item, index) in homeGameData" :key="index">
      <div class="card_list_box game_list_box" v-if="item">
        <ul class="card_title">
          <li class="title_left">
            <img :src="item.id == 0 ? `/imgs/home/${item.id}.webp` : `${settings.backend_upload}${item.icon_h5}`"
              alt="" />
            <span> {{ unserialize(item.name, false) }}</span>
          </li>
          <li class="title_right">
            <p class="more" @click="clickGameMore(item)">
              {{ t('home_page_more') }}
            </p>
            <div class="swiper-btn" :class="['swiper_pre_game' + index, { disabled: isGameBeginning[index] }]"
              @click="handlePrev(index)">
              <iconpark-icon name="zuo-keyong" size="24" />
            </div>
            <div class="swiper-btn" :class="['swiper_next_game' + index, { disabled: isGameEnd[index] }]"
              @click="handleNext(index)">
              <iconpark-icon name="you-keyong" size="24" />

            </div>
          </li>
        </ul>
        <swiper direction="horizontal" :modules="modules" :navigation="{
          prevEl: '.swiper_pre_game' + index,
          nextEl: 'swiper_next_game' + index
        }" :autoplay="false" :delay="300000" :loop="false" :disableOnIntercation="false" slidesPerView="auto"
          :spaceBetween="5 - 5" :centeredSlides="true" @swiper="(el: any) => { refNameList[index] = el }"
          @slideChange="() => updateHomeGameDataSwiperStatus(index)">
          <swiper-slide v-for="(gameList, i) in item.newList" :key="i">
            <div :class="item.id == 0 ? 'hot_game_list' : 'other_list'">
              <div :class="item.id == 0 ? 'all_game' : 'other_game'" v-for="(gameItem, s) in gameList" :key="s">
                <div @click="toGameDetail(gameItem)">
                  <img class="bg_img" :src="`${settings.backend_upload}${gameItem.picture_h5}`" alt="" />
                  <iconpark-icon class="collect_img" v-if="hasLogin && gameItem.has_next == 0"
                    :name="allCollected.includes(gameItem.id) ? 'shoucang-sel' : 'shoucang-def'" size="1rem"
                    @click.stop="reqCollect(gameItem, allCollected)"></iconpark-icon>
                  <div class="game_name">
                    {{ unserialize(gameItem.name, false) }}
                  </div>
                </div>

                <div v-if="gameItem.ismMintain === 1" class="masking_layer">
                  <iconpark-icon class="maskin_img" name="padlock1" size="28" />
                  <span>{{ t('inside_page_game_coming_soon') }}</span>
                  <span>{{ t('inside_page_game_stay_tuned') }}</span>
                </div>
              </div>
            </div>
          </swiper-slide>
        </swiper>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, nextTick, watch, onBeforeMount } from 'vue';
import { i18n } from '@/languages';
import { storeToRefs } from 'pinia';
import pinia from '@/store/index';
import { useI18n } from 'vue-i18n';

import { Swiper, SwiperSlide } from 'swiper/vue';
import { Autoplay, Pagination } from 'swiper/modules';

import 'swiper/css';
import 'swiper/css/pagination' // 轮播图底面的小圆点
import 'swiper/css/pagination'
import { useRouter } from "vue-router";
const router = useRouter();
import { User } from '@/store/user';
import { Page } from '@/store/page';

import { reqCollect } from '@/utils/useNetMethods';
import { unserialize, onPlayGame } from '@/utils/useStoreMethods';

const {
  hasLogin,
  allCollected } = storeToRefs(User(pinia));
const {
  lang,
  settings,
  homeGameData,
} = storeToRefs(Page(pinia));

const { t } = useI18n();

const modules = [Autoplay, Pagination];

const refNameList: any = ref([])
const isGameBeginning = ref<boolean[]>([])
const isGameEnd = ref<boolean[]>([])

console.log('homeGameData', homeGameData)

const clickGameMore = (item: any) => {
  if (item.id == 0) {
    router.push('/hotGameDetail')
  } else {
    router.push({
      path: '/gameDetail',
      query: { venue_id: item.id }
    })
  }
}

const handlePrev = (index: number) => {
  const swiper = refNameList.value[index];
  if (swiper && !isGameBeginning.value[index]) {
    swiper.slidePrev();
  }
}

const handleNext = (index: number) => {
  const swiper = refNameList.value[index];
  if (swiper && !isGameEnd.value[index]) {
    swiper.slideNext();
  }
}

const updateHomeGameDataSwiperStatus = (index: number) => {
  const swiper = refNameList.value[index];
  if (homeGameData.value[index]?.newList.length === 0) {
    isGameBeginning.value[index] = true;
    isGameEnd.value[index] = true;
    return;
  }
  if (swiper) {
    isGameBeginning.value[index] = swiper.isBeginning;
    isGameEnd.value[index] = swiper.isEnd;
  }
};

watch(
  () => homeGameData,
  () => {
    nextTick(() => {
      refNameList.value.forEach((swiper: any, index: number) => {
        if (swiper) {
          swiper.update();
          updateHomeGameDataSwiperStatus(index);
        }
      });
    });
  },
  { immediate: true, deep: true }
);

// 判读是否是进入游戏二级页或者直接进入游戏
const toGameDetail = async (item: any) => {
  console.log(item);
  if (item.has_next == 1) {
    // 跳转二级页面
    router.push({
      path: 'gameDetail',
      query: {
        agent_id: item.id,
        venue_id: item.three_game_kind[0].id,
        name: item.name[lang.value].toUpperCase(),
      }
    })
  } else {
    onPlayGame(item)
  }
}

onBeforeMount(() => {
  i18n.global.locale.value = lang.value
})
</script>

<style lang="scss" scoped>
.card_list_box {
  padding-left: 14px;

  .card_title {
    display: flex;
    padding: 0 14px;
    justify-content: space-between;
    align-items: center;
    height: 24px;
    line-height: 24px;
    margin: 12px 0;

    .title_left {
      font-family: PingFang SC;
      font-size: 14px;
      font-weight: 600;
      line-height: 16px;
      text-align: left;
      color: #FCFFFA;
      display: flex;
      justify-content: space-between;
      align-items: center;

      img {
        width: 18px;
        height: 18px;
        margin-right: 5px;
      }
    }

    .title_right {
      font-family: PingFang SC;
      font-size: 12px;
      font-weight: 500;
      line-height: 12px;
      text-align: left;
      color: #C6C4F5;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .more {
        background: #282747;
        margin-left: 8px;
        padding: 8px;
        border-radius: 5px;
        box-shadow: 0.5px 0.5px 1px 0px #4B4A6E inset;
      }

      .swiper-btn {
        margin-left: 8px;
      }

      .disabled {
        pointer-events: none;
        opacity: 0.5;
        cursor: not-allowed;
      }
    }
  }

  .hot_game_list {
    height: 224px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    // justify-content: space-between;

    .all_game {
      width: 81px;
      height: 108px;
      margin-right: 6px;
      margin-bottom: 6px;
      background: #1A1944;
      border-radius: 8px;
      position: relative;

      .bg_img {
        width: 82px;
        height: 82px;
      }

      .game_name {
        width: 90%;
        margin-top: 0px;
        text-align: center;
        overflow: hidden; //超出的文本隐藏
        text-overflow: ellipsis; //溢出用省略号显示
        white-space: nowrap; //溢出不换行
      }
    }
  }

  .other_list {
    width: 100%;
    height: 304px;
    display: flex;
    flex-wrap: wrap;

    .other_game {
      position: relative;
      width: 110px;
      height: 146px;
      margin-right: 6px;
      margin-bottom: 6px;
      background: #1A1944;
      border-radius: 8px;
    }

    .bg_img {
      width: 112px;
      height: 112px;
    }

    .game_name {
      margin-top: 5px;
      text-align: center;
      overflow: hidden; //超出的文本隐藏
      text-overflow: ellipsis; //溢出用省略号显示
      white-space: nowrap; //溢出不换行
    }
  }

  .collect_img {
    position: absolute;
    top: 4px;
    right: 4px;
  }

  .masking_layer {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(1px);
    background: rgba(0, 0, 0, 0.6);
    font-family: PingFang SC;
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
    color: #ffffff;

    .maskin_img {
      width: 32px;
      height: 32px;
      margin-bottom: 8px;
    }
  }
}
</style>